{% extends 'SystemAdminBundle:base:main.0.html.twig' %}

{% block content %}
    {% block main %}

        <form method="post" action="" target="mainframe">
        <div id="floatHead" class="content-tab-wrap">
            <div class="content-tab">
                <div class="content-tab-ul-wrap">
                    <ul>
                        <li><a class="selected" href="javascript:;">选择知识点</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="tab-content">
            <dl>
                <dt>题目标题</dt>
                <dd>
                    {{ Question.title }}
                </dd>
            </dl>

            <dl>
                <dt>教育阶段</dt>
                <dd>
                    <div class="rule-multi-radio choices" id="Stage">
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>年级</dt>
                <dd>
                    <div class="rule-multi-radio choices" id="Grade">
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>学期</dt>
                <dd>
                    <div class="rule-multi-radio choices" id="Term">
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>科目</dt>
                <dd>
                    <div class="rule-multi-radio choices" id="Subject">
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>知识点选择</dt>
                <dd>

                    <!--列表-->
                    <div class="table-container">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ltable">
                            <tbody>
                                <tr>
                                    <th width="6%">选择</th>
                                    <th align="left">知识点</th>
                                    <th align="left" width="16%">&nbsp;</th>
                                </tr>
                            </tbody>
                            <tbody id="Section">
                            </tbody>
                        </table>
                    </div>
                    <!--/列表-->
                </dd>
            </dl>
        </div>
        {% block submit %}
            <div class="page-footer">
                <div class="btn-wrap">
                    <input type="submit" value="提交保存" id="btnSubmit" class="btn" />
                    <input name="btnReturn" type="button" value="返回上一页" class="btn yellow" onclick="javascript:history.back(-1);" />
                </div>
            </div>
        {% endblock %}
        </form>
    {% endblock %}
    <!-- 需引入-->
    <script type="text/javascript" charset="utf-8" src="{{ asset("bundles/systemadmin/js/laymain.js")}}"></script>
    {% block script %}
        {#---------------------------------------分类选择JS------------------------------------#}
        <script>
            function init(){
                $("td")
                        .on("click",".openTag", function () {
                            {#展开动作#}
                            var parentId = $(this).parent().parent().attr("id");
                            $("#" + parentId).find(".closeTag").show().find(".openTag").hide();
                            $("." + parentId).show();
                        })
                        .on("click",".closeTag", function () {
                            {#收起动作#}
                            var parentId = $(this).parent().parent().attr("id");
                            $("#" + parentId).find(".openTag").show().find(".closeTag").hide();
                            $("." + parentId).hide();
                        });

                {#按钮点击事件#}
                $("dd").on("click",".item", function () {
                    var parentId = $(this).val();
                    setDataById(parentId);
                });
            }
            function emptyData(target){
                $("#" + target).html("");
            }
            function setData(target,id,cnName){
                var input = $('<input class="item" type="radio" name="" value="">');
                var label = $('<label>');
                input.attr("name",target).val(id);
                label.append(input).append(cnName);
                $( "#" + target ).append(label).ruleMultiRadio();
            }
            function setListData(target,id,cnName){
                var setction =  '' +
                        '<tr id="section_' +
                        id +
                        '">' +
                        '<td align="center"></td>' +
                        '<td>' +
                        cnName +
                        '</td>' +
                        '<td><a class="openTag">展开>></a><a class="closeTag" style="display: none;">收起<<</a></td>' +
                        '</tr>';

                var html = "";
                var data = sorts[id];
                html += setction;
                var point;
                for(var i in data){
                    point = '' +
                            '<tr class="section_' +
                            id + //parentId
                            '"  style="display: none;">' +
                            '<td align="center"><span class="checkall" style="vertical-align:middle;">' +
                            '<input id="Point_' +
                            data[i][0]  + //selfId
                            '" value="' +
                            data[i][0]  + //selfId
                            '" type="radio" name="Point">' +
                            '</span></td>' +
                            '<td style="padding-left: 30px;"><label for="Point_' +
                            data[i][0]  + //selfId
                            '">' +
                            data[i][1] +
                            '</label></label></td>' +
                            '<td></td>' +
                            '</tr>';
                    html += point;
                }
                $( "#" + target ).append(html);
            }

            function setDataById(id){
                var data = sorts[id];
                if(data){
                    var boxId = data[0][2];
                    if(boxId < 4){
                        for( var n = boxId ; n < 5 ; n++ ){
                            emptyData(choices[n]);
                        }
                        for(var i in data){
                            setData(choices[data[i][2]],data[i][0],data[i][1]);
                        }
                    }else {
                        $( "#" + choices[data[0][2]] ).html("");
                        for(var i in data){
                            console.log(i);
                            setListData(choices[data[i][2]],data[i][0],data[i][1]);
                        }
                        init();
                    }
                }else{
                    //没有找到下级数据
                    parent.jsdialog("错误提示", "没有获取到该类目下的数据","")
                }
            }
            $(function () {
                setDataById("0");
                init();
                for( var i in link ){
                    $("input[value=" + link[i] + "]").click();
                    $("#section_" + link[i]).find(".openTag").click();
                }
                $(".rule-multi-radio").ruleMultiRadio();
            });
        </script>
        <script>
            var sorts = {{ sorts|raw }};
            var choices = ["Stage","Grade","Term","Subject","Section","Point"];
            var link = {{ Sort|raw }};
        </script>
        {#---------------------------------------分类选择JS------------------------------------#}
        {% include 'SystemAdminBundle:base:inc.js.article.twig' %}
        {% include 'SystemAdminBundle:base:inc.js.pic.upload.twig' %}
    {% endblock %}
{% endblock %}